<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>邀请好友</title>
    <link rel="stylesheet" href="/index/css/common.css?v=2">
    <link rel="stylesheet" type="text/css" href="/index/css/swiper-3.3.1.min.css">
    <link rel="stylesheet" type="text/css" href="/index/css/invite.css?v=12">
    <script src="/index/js/jquery-3.4.1.min.js"></script>
    <script src="/index/js/clipboard.min.js"></script>
    <script type="text/javascript" src="/index/js/swiper-3.3.1.min.js"></script>
    <script src="/index/js/common.js?1"></script>
    <script>
        function drawAndShareImage(obj, top, left, size) {

            var canvas = document.createElement("canvas");

            var _width = $(obj).width() * 2;
            var _height = $(obj).height() * 2;
            canvas.width = _width
            canvas.height = _height
            var context = canvas.getContext("2d");

//            context.rect(0 , 0 , canvas.width , canvas.height);
//            context.fillStyle = "#fff";
//            context.fill();

            var myImage = new Image();
            myImage.crossOrigin = 'anonymous';

            myImage.src = $(obj).attr('src');    //背景图片  你自己本地的图片或者在线图片

            myImage.onload = function () {
                context.drawImage(myImage, 0, 0, _width, _height);
//              context.font = "60px Courier New";
//              context.fillText("我是文字",350,450);
                var myImage2 = new Image();
//                 myImage2.crossOrigin = 'Anonymous';
                myImage2.src = '{$qrcode}';   //你自己本地的图片或者在线图片
                myImage2.onload = function () {
//                    console.log(3);

                    $('obj')
                    context.drawImage(myImage2, _width * left / 100, _height * top / 100, _width * size / 100, _width * size / 100);

                    var base64 = canvas.toDataURL();
//                    alert(base64);
//                    obj.setAttribute('src' , base64);
//					console.log(base64);
                    $(obj).removeAttr('onload');
                    obj.src = base64;
//                    $(obj).attr('src',base64);
                }
            }
        }

    </script>
</head>

<body>
<div class="tabsBox">
    <div class="topTab">
        <div class="tabLeft" >
            <img src="/index/assets/left.png">
        </div>
        <div class="tabCenter">分享邀请好友</div>
        <div class="tabRight jilu"><a href="{:url('inviteRecord')}">邀请记录</a></div>
    </div>
</div>
<div class="invite">
    <!--<div class="xianshi">限时活动：07.21-08.12</div>-->
    <!--<div class="invite_friend">邀请好友赚{$share_money}元</div>-->
    <!--<div class="xianshi">好友消费可永久获得额外最高的60%的奖励</div>-->
    <!--<div class="fasong">点击下方邀请活动图片素材/邀请码/专属链接发送给您的好友</div>-->
    <img src="{$img_path}{$share_bg}" alt="" style="width:100%;">

    <div class="yaoqingBox">
        <div class="mine">我的邀请码　：
            <span class="code" id="invite_code">{$invite_code}</span>
            <button class="copy" onclick="copy('invite_code')">复制</button>
        </div>
        <div class="yaoqingBox">
            <div class="link">

                <!--<div>-->
                <button class="copy" onclick="copy('invite_link')">复制</button>

                <span>我的专属链接：<span class="code" id="invite_link" style="font-size:15px;">{$share_url}</span></span>


                <!--</div>-->

            </div>
        </div>
    </div>
    <!-- 广告图 -->
    <div class="myShare">我的分享素材 <span style="color:#ff5837">（长按图片保存）</span></div>
    <div class="swiper-container">
        <div class="swiper-wrapper">

            {foreach $share_imgs as $k=> $v}
            <div class="swiper-slide slide-bg-{$k}" style="position: relative">
                <img src="{$img_path}{$v.img}?v={:time()}"
                     onload="drawAndShareImage(this,$(this).attr('top'),$(this).attr('left'),$(this).attr('size'));"
                     class="bg-img" left="{$v.left}" top="{$v.top}" size='{$v.size}' crossorigin="anonymous">
                <!--<img src="{$qrcode}" alt="" style="position: absolute;width:{$v.size}%;top:{$v.top}%;left:{$v.left}%">-->
            </div>
            {/foreach}

        </div>
    </div>
    <!--<div class="save">-->
    <!--<div class="saveBtn">保存图片到相册</div>-->
    <!--</div>-->
</body>

<!--<script type="text/javascript" src="//cdn.jsdelivr.net/npm/eruda"></script>-->
<!--<script src="/index/js/html2canvas.js?1"></script>-->

<!--<script>eruda.init();</script>-->
{include file='common/toast'}

<script>

    //复制
    function copy(id) {
        var obj = document.getElementById(id)
        copyText(obj, obj.innerText);
    }


    $(function () {

//	setTimeout(function() {
        var size = $(window).innerWidth() / 7.5
//		var wid = $(window).innerWidth() * 0.8
//		$('.swiper-container').css({
//			'height': wid
//		})
        stretchNum = .4 * size;
        new Swiper('.swiper-container', {
            effect: 'coverflow',
            // slidesPerView: 3,
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflow: {
                rotate: 0, // 旋转的角度
                stretch: -stretchNum, // 拉伸   图片间左右的间距和密集度
                depth: 100, // 深度   切换图片间上下的间距和密集度
                modifier: 2, // 修正值 该值越大前面的效果越明显
                slideShadows: false // 页面阴影效果
            }
        })
//	}, 100);

//        var obj2 = document.getElementsByClassName('bg-img-2')[0];
//        var obj3 = document.getElementsByClassName('bg-img-3')[0];
//
//
//		obj1.onload = function(){
////            drawAndShareImage(obj1,$(obj1).attr('top'),$(obj1).attr('left'),$(obj1).attr('size'));
//            console.log('obj1');
//        }
//        obj2.onload = function(){
//            drawAndShareImage(obj2,$(obj2).attr('top'),$(obj2).attr('left'),$(obj2).attr('size'));
//        }
//        obj3.onload = function(){
//            drawAndShareImage(obj3,$(obj3).attr('top'),$(obj3).attr('left'),$(obj3).attr('size'));
//        }

//		console.log(obj1);
//		console.log(obj2);
//		console.log(obj3);
//        drawAndShareImage(this,$(this).attr('top'),$(this).attr('left'),$(this).attr('size'));

//        $('.bg-img').each(function(){

//        	drawAndShareImage(this,$(this).attr('top'),$(this).attr('left'),$(this).attr('size'));

//				console.log(1);
//                console.log(this);
//                var a=new Image(); //这个是原生的JS实例化
////
//                a.src=$(obj).attr('src');
//
//                a.onload=function(){
////                console.log(1);
//                    html2canvas(document.querySelector(".slide-bg-"+k)).then(canvas => {
//                        var base64 = canvas.toDataURL();
//
//						$('.slide-bg-'+k).html('<img src="'+base64+'" />');
//						console.log(3);
//                	});
//                }
//            this.onload = function(){

//            }
//
//            })
        //生成canvas


    })
</script>
</html>